<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="imdex.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <script src="/jquery-1.12.4.js"></script>
    <title>Document</title>
    <script>
        $(document).ready(function () {
            $('.middele1').click(function () {
                $('ul').toggle();
            });
        });
    </script>
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class="top-box">
                <div class="top">
                    <div class="t-left">
                        <img src="/image/2-min.png" alt="">
                    </div>
                    <div class="t-middle">
                        <img class="middele1" src="/image/分类 (1).png" alt="">
                        <ul>
                            <li><a href="">首页</a></li>
                            <li><a href="/department/department.html">部门概况</a></li>
                            <li><a href="">师资队伍</a></li>
                            <li><a href="">思政建设</a></li>
                            <li><a href="">红馆</a></li>
                            <li><a href="">心理健康教育中心</a></li>
                            <li><a href="">教学科研</a></li>
                            <li><a href="">学生社团</a></li>
                        </ul>
                    </div>
                    <div class="t-right">
                        <img src="/image/搜索.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="/image/1-min.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="/image/1-min.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="/image/1-min.png" alt="">
                    </div>
                    <!-- 需要滚动条 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!-- 新闻公告 -->
            <div class="News">
                <div class="n-box">
                    <div class="n-title">
                        <div>新闻公告</div>
                        <div class="bian">XIN WEN GONG GAO</div>
                    </div>
                    <div class="n-middle">
                        <div class="n-m-left">
                            <img src="/image/3-min.png" alt="">
                        </div>
                        <div class="n-m-right">
                            <div class="n-m-title">
                                “为1育人 为国育才”————9位法大教师倾情讲述育人故事
                            </div>
                            <div class="n-m-b">
                                <div class="n-m-line"></div>
                                <div class="n-m-text">2022-11-02</div>
                            </div>
                            <div class="n-m-bottom">
                                <div class="n-m-b-text">
                                    三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比天大，是一幅字、一块匾，是心照不宣的默契……
                                </div>
                                <div class="n-m-b-bottom">
                                    <div class="n-m-b-b-left">
                                        <img src="/image/4-min.png" alt="">
                                        <img src="/image/4-min.png" alt="">
                                    </div>
                                    <div class="n-m-b-b-right">
                                        <span>1</span>/3
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="n-bottom">
                        <div class="n-b-para">
                            <div class="n-b-p-title">“为1育人 为国育才”——9位法大教师倾情讲述育</div>
                            <div class="n-b-p-text">三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才……</div>
                            <div class="n-b-p-num">2022-11-02</div>
                        </div>
                        <div class="n-b-para">
                            <div class="n-b-p-title">“为1育人 为国育才”——9位法大教师倾情讲述育</div>
                            <div class="n-b-p-text">三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才……</div>
                            <div class="n-b-p-num">2022-11-02</div>
                        </div>
                        <div class="n-b-para">
                            <div class="n-b-p-title">“为1育人 为国育才”——9位法大教师倾情讲述育</div>
                            <div class="n-b-p-text">三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一块匾，是心照不宣的默契三尺讲台育英才……</div>
                            <div class="n-b-p-num">2022-11-02</div>
                        </div>
                    </div>
                    <div class="more">
                        查看更多
                        <img src="/image/4-min.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 1建引领 -->
            <div class="lead">
                <div class="l-box">
                    <div class="l-title">
                        <div>1建引领</div>
                        <div>DANG JIAN YIN LING</div>
                    </div>
                    <div class="l-middle">
                        <div class="l-m-para">
                            <div class="img"><img src="/image/5-min.png" alt=""></div>
                            <div class="m-content">
                                <div class="left">
                                    <div>02</div>
                                    <div>2022-11</div>
                                </div>
                                <div class="right">
                                    关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
                                </div>
                            </div>
                        </div>
                        <div class="l-m-para">
                            <div class="img"><img src="/image/5-min.png" alt=""></div>
                            <div class="m-content">
                                <div class="left">
                                    <div>02</div>
                                    <div>2022-11</div>
                                </div>
                                <div class="right">
                                    关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
                                </div>
                            </div>
                        </div>
                        <div class="l-m-para">
                            <div class="img"><img src="/image/5-min.png" alt=""></div>
                            <div class="m-content">
                                <div class="left">
                                    <div>02</div>
                                    <div>2022-11</div>
                                </div>
                                <div class="right">
                                    关于举办第二届(2022年)烟台市乡村面艺关于举办第二届(2022年)烟台市乡村面艺……
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="more">
                        查看更多
                        <img src="/image/4-min.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 教研动态 -->
            <div class="Research">
                <div class="r-box">
                    <div class="r-title">
                        <div>教研动态</div>
                        <div>JIAO YAN DONG TAI</div>
                    </div>
                    <div class="r-content">
                        <div class="r-c-left">
                            <img src="/image/6-min.png" alt="">
                            <div class="r-c-l-text">
                                “为1育人 为国育才”
                            </div>
                        </div>
                        <div class="r-c-right">
                            <ul>
                                <li>
                                    <div class="r-c-text">
                                        <div>“为1育人 为国育才”</div>
                                        <div>2022-11-2</div>
                                    </div>
                                    <div class="r-c-line"></div>
                                </li>
                                <li>
                                    <div class="r-c-text">
                                        <div>“为1育人 为国育才”</div>
                                        <div>2022-11-2</div>
                                    </div>
                                    <div class="r-c-line"></div>
                                </li>
                                <li>
                                    <div class="r-c-text">
                                        <div>“为1育人 为国育才”</div>
                                        <div>2022-11-2</div>
                                    </div>
                                    <div class="r-c-line"></div>
                                </li>
                                <li>
                                    <div class="r-c-text">
                                        <div>“为1育人 为国育才”</div>
                                        <div>2022-11-2</div>
                                    </div>
                                    <div class="r-c-line"></div>
                                </li>
                                <li>
                                    <div class="r-c-text">
                                        <div>“为1育人 为国育才”</div>
                                        <div>2022-11-2</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="more">
                        查看更多
                        <img src="/image/4-min.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 社会服务 -->
            <div class="serve">
                <div class="serve-box">
                    <div class="s-title">
                        <div>社会服务</div>
                        <div>SHE HUI FU WU</div>
                    </div>
                    <div class="s-content">
                        <div class="s-c-left">
                            <div class="img">
                                <img src="/image/10-min.png" alt="">
                            </div>
                            <div class="s-c-l-para">
                                <div>形势与政策报告会之“新东欧地缘政治冲突及……</div>
                                <div>形势与政策报告会之“新东欧地缘政治冲突及形势与政策报告会之“新东欧地缘\政治冲突及形势与政策报告会之”新东欧地缘政治冲突及…</div>
                                <div>
                                    <img src="/image/11-min.png" alt="">
                                    2022-09-29
                                </div>
                            </div>
                        </div>
                        <div class="s-c-right">
                            <div class="s-c-r-t">
                                <img src="/image/8-min.png" alt="">
                                <div>红馆</div>
                            </div>
                            <div class="s-c-r-b">
                                <img src="/image/9-min.png" alt="">
                                <div>心理健康中心</div>
                            </div>
                        </div>
                    </div>
                    <div class="more">
                        查看更多
                        <img src="/image/4-min.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 主题活动 -->
            <div class="box4">
                <div class="box4title">
                    <div class="box4title1">ZHU TI FU WU</div>
                    <div class="box4title2">主题活动</div>
                </div>
                <div class="box4center">
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="/image/12-min.png" alt="">
                            <div class="box4center1-1font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日,一场别开生面的平台通
                            过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="/image/12-min.png" alt="">
                            <div class="box4center1-1font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日,一场别开生面的平台通
                            过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="/image/12-min.png" alt="">
                            <div class="box4center1-1font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日,一场别开生面的平台通
                            过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                    <div class="box4center1">
                        <div class="box4center1-1">
                            <img src="/image/12-min.png" alt="">
                            <div class="box4center1-1font">
                                山东城院“五心工程”<br />
                                温暖校园
                            </div>
                        </div>
                        <div class="box4center1-2">
                            3月24日,一场别开生面的平台通
                            过网络直播的形式拉开帷幕...
                        </div>
                    </div>
                </div>
                <div class="box4bottom">
                    查看更多
                    <img src="/image/4-min.png" alt="">
                </div>
            </div>
            <!-- 马院风采 -->
            <div class="mien">
                <div class="m-title">
                    <div>马院风采</div>
                    <div>MA YUAN FENG CAI</div>
                </div>
                <div class="box5center">
                    <div class="mien-img">
                        <div class="i-top">
                            <img src="/image/lk1.jpg" alt="">
                            <img src="/image/lk2.jpg" alt="">
                        </div>
                        <div class="i-bottom">
                            <img src="/image/lk4.jpg" alt="">
                            <img src="/image/lk10.jpg" alt="">
                        </div>
                    </div>
                    <div class="swiper mySwiper2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="/image/lk1.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk3.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk4.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk5.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk6.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk7.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk8.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk9.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="/image/lk10.jpg" alt=""></div>
                        </div>
                        <!-- <div class="swiper-pagination"></div> -->
                    </div>
                    <div class="more">
                        查看更多
                        <img src="/image/4-min.png" alt="">
                    </div>
                </div>
                <div class="mein-bottom">
                    <ul>
                        <li>友情链接：</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                        <li>山东教育局</li>
                    </ul>
                </div>
            </div>
            <!-- 底部 -->
            <div class="bottom">
                <div class="bottom-box">
                    <div class="bottom-content">
                        <div class="bottom-left">
                            <img src="/image/2-min.png" alt="">
                        </div>
                        <div class="bottom-middle">
                            <div class="b-m-left">
                                地址:山东省烟台市高新区海天路1001号
                            </div>
                            <div class="b-m-right">
                                办公室电话:0535-293876
                            </div>
                        </div>
                        <div class="bottom-b-right">
                            <img src="/image/二维码.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="b-b-line">
                    Copyright ◎山东省城市服务技师学院版权所有
                </div>
            </div>
        </div>
</body>
<script>
    var mySwiper = new Swiper('.swiper', {
        autoplay: {
            delay: 3000
        },
        loop: true,//循环模式选项
        //如果需要滚动条
        pagination: {
            el: '.swiper-pagination',
        },
    })
</script>
<script>
    var swiper = new Swiper(".mySwiper2", {
        slidesPerView: 5,
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        loop: true,//循环模式选项
    });
</script>

</html>